<!--输入窗口-->
<script setup lang="ts">
import {ref} from "vue";

const value2 = ref<string>('')
</script>
<template>
  <div class="field">
    <div class="tools">
      <div class="material-icons">mood</div>
      <div class="material-icons">image</div>
    </div>
    <div class="input-container">
      <a-textarea v-model:value="value2" placeholder="Type your message" allow-clear class="input"></a-textarea>
      <a-button class="doMessage" type="primary">发送</a-button>
    </div>
  </div>
</template>
<style lang="less" scoped>
.field {
  border-top: 1px solid #D9D9D9;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 120px;
  background-color: #F2F4F7;
  .tools {
    height: 30px;
    padding: 0 5%;
    display: flex;
    align-items: center;
    user-select: none;
    .material-icons {
      cursor: pointer;
      color: #49494A;
      font-weight: 400;
      margin: 0 3px;
    }
    .material-icons:hover {
      cursor: pointer;
    }
  }
  .input-container {
    width: 95%;
    height: 80px;
    border-radius: 10px;
    margin: 0 auto 0 auto;
    display: flex;
    justify-content: space-around;
    .input {
      border-radius: 10px;
      width: 85%;
      height: 100%;
      resize: none;
    }
    .doMessage {
      width: 10%;
      height: 30px;
      font-size: 12px;
      border-radius: 10px;
    }
  }
}

/deep/ textarea.ant-input {
  resize: none;
  border-radius: 10px;
}
</style>
